<template>
  <div class="container">
    <div id="exhart8" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
// import * as echarts from "echarts";
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import api from '../utils/api';

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
  name: '',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      option: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    api.getCDLYFXByPFMarket().then((res) => {
      this.getInit(res.data);
    });
  },
  methods: {
    getInit(_data) {
      let data = [];
      _data.forEach((item) => {
        data.push([item.comeaddress, item.jhsum]);
      });
      var chart = Highcharts.chart('exhart8', {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45,
          },
          backgroundColor: 'none',
          // margin: [0, 100, 0, 0],
          marginLeft: -220,
          style: {
            fontFamily: '',
            fontSize: '15px',
            color: '#fff',
          },
        },
        title: {
          text: null,
          style: {
            fontFamily: '',
            fontSize: '15px',
            color: '#fff',
          },
        },
        credits: {
          enabled: false,
        },
        legend: {
          borderRadiusL: '0',
          // layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -10,
          y: 50,
          width: 200,
          itemWidth: 100,
          itemDistance: 0,
          labelFormatter: function() {
            return `${this.name} ${this.y.toFixed(2)}吨`;
          },
          floating: true,
          backgroundColor: 'none',
          shadow: true,
          itemStyle: {
            color: '#fff',
          },
          symbolRadius: '0',
        },
        plotOptions: {
          pie: {
            innerSize: 50,
            depth: 35,
            showInLegend: true,
            dataLabels: {
              enabled: true,
              format: '{point.percentage:.2f} %',
              style: {
                color: '#fff',
              },
            },
          },
        },
        series: [
          {
            name: '交易数量',
            data: data,
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
}
</style>
